<template>
  <div>
    <div class="top">
      <div class="top-header">
        <div class="youlive">
          <div>分享你的点滴生活</div>
          <div class="draft" @click="gotodraft">
            <Icon type="ios-calendar-outline" />草稿箱
          </div>
        </div>
      </div>
      <Form
        style="padding-top: 10px"
        ref="formValidate"
        :label-width="0"
        :model="formValidate"
        :rules="ruleValidate"
      >
        <FormItem label="" prop="titleText">
          <Input
            v-model="formValidate.titleText"
            maxlength="20"
            style="width: 400px"
            placeholder="请填写标题(必填，最多20字)"
          ></Input>
        </FormItem>
        <FormItem label="" prop="contText">
          <Input
            v-model="formValidate.contText"
            type="textarea"
            maxlength="300"
            placeholder="请填写正文(必填)"
          ></Input>
        </FormItem>
      </Form>

      <div class="live">
        <div class="live-left">
          <Poptip
            placement="bottom-start"
            popper-class="popCla"
            width="400"
            word-wrap
          >
            <Icon type="ios-paper-outline" />图片
            <div class="text type-box" slot="content">
              <div class="sub-box">
                <div
                  class="demo-upload-list"
                  v-for="(img, index) in uploadList"
                  :key="index"
                >
                  <img :src="img" />
                  <div class="demo-upload-list-cover">
                    <!--<Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>-->
                    <Icon
                      type="ios-trash-outline"
                      @click.native="handleRemove(index)"
                    ></Icon>
                  </div>
                </div>
                <Upload
                  :show-upload-list="false"
                  :on-success="handleSuccess"
                  :on-format-error="handleSuccessLu"
                  :before-upload="handleBeforeUpload"
                  :format="['jpg', 'jpeg', 'png']"
                  :action="action"
                  :headers="accessToken"
                  style="display: inline-block; width: 60px"
                >
                  <div
                    class="hover-pointer icon-upload"
                    style="
                      width: 60px;
                      height: 60px;
                      text-align: center;
                      line-height: 60px;
                    "
                  >
                    <Icon type="ios-camera" size="20"></Icon>
                  </div>
                </Upload>
              </div>
            </div>
          </Poptip>
          <Poptip
            placement="bottom-start"
            popper-class="popCla"
            width="400"
            style="margin-left: 20px"
          >
            <Icon type="logo-youtube" />视频
            <div class="text type-box" slot="content">
              <div class="sub-box">
                <div
                  class="demo-upload-list"
                  style="width: 100px"
                  v-for="(img, index) in uploadListVideo"
                  :key="index"
                >
                  <video style="width: 100px" :src="img"></video>
                  <div class="demo-upload-list-cover">
                    <!--<Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>-->
                    <Icon
                      type="ios-trash-outline"
                      @click.native="handleRemoveVideo(index)"
                    ></Icon>
                  </div>
                </div>
                <Upload
                  :show-upload-list="false"
                  :on-success="handleSuccessVideo"
                  :on-format-error="handleSuccessVideoLu"
                  :before-upload="handleBeforeUploadVideo"
                  :format="['mp4', 'avi']"
                  :action="action"
                  :headers="accessToken"
                  style="display: inline-block; width: 60px"
                >
                  <div
                    class="hover-pointer icon-upload"
                    style="width: 100px; height: 100px; text-align: center"
                  >
                    <div style="padding: 5px 0">
                      <span style="font-size: 16px">上传视频</span>
                      <span style="color: #999999"
                        >支持上传MP4格式文件，不超过1GB</span
                      >
                    </div>
                    <div
                      style="
                        padding-top: 10px;
                        border: 1px #e8e8e8 solid;
                        width: 60px;
                        height: 60px;
                        color: #999999;
                      "
                    >
                      <div>上传视频</div>
                      <Icon type="md-add" size="20"></Icon>
                    </div>
                  </div>
                </Upload>
              </div>
            </div>
          </Poptip>
        </div>
        <div class="live-right">
          <Cascader
            :data="typeList"
            v-model="value1"
            :load-data="loadData"
            @on-change="casChange"
          >
            <div class="defult">
              <div>
                {{ defultcircle }}
              </div>
              <Icon type="ios-arrow-down"></Icon>
            </div>
          </Cascader>
          <!-- <Dropdown trigger="click" class="drop">
            <div class="defult">
              <div>{{ select }}</div>
              <Icon type="ios-arrow-down"></Icon>
            </div>
            <DropdownMenu slot="list" class="dropMenu">
              <DropdownItem
                v-for="(item, index) in list"
                :key="index"
                class="dropItem"
                @click.native="selectItem(item, index)"
              >
                <Icon
                  :type="item.icon"
                  class="icon"
                  size="20"
                  :color="item.color"
                />
                <div class="title">{{ item.name }}</div>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown> -->
          <button class="sub" @click="handleSubmit('formValidate')">
            发布
          </button>
        </div>
      </div>
    </div>
    <div class="platform-activities">
      <div class="platform-activities-tit">
        <span>平台活动</span>
        <div class="platform-activities-tit-span" @click="toActivePage">
          查看全部
        </div>
      </div>
      <div
        class="platform-activities-contain"
        v-for="item in show"
        :key="item.id"
        @click="toDetail(item)"
      >
        <div class="platform-activities-left">
          <div class="platform-activities-left-span">{{ item.title }}</div>
          <div class="platform-activities-left-time">
            <img
              maxlength="100%"
              class="platform-activities-left-img"
              src="../../assets/communityimg/click.png"
              alt=""
            />
            <span>报名时间：{{ item.ready_stime }}-{{ item.ready_time }}</span>
          </div>
        </div>
        <div class="platform-activities-right">
          <div class="coming">
            <span
              v-if="item.status == -1"
              :class="item.status == -1 ? 'inActive' : 'active'"
              >活动已结束</span
            >
            <span
              v-if="item.status == 1"
              :class="item.status == 1 ? 'active' : 'inActive'"
              >活动进行中</span
            >
            <span
              v-if="item.status == 2"
              :class="item.status == 2 ? 'active' : 'inActive'"
              >活动报名中</span
            >
            <span
              v-if="item.status == 0"
              :class="item.status === 0 ? 'inActive' : 'active'"
              >活动未开始</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="center" v-for="(item, index) in data" :key="item.id">
      <div class="container">
        <div class="container-top">
          <div class="container-top-img">
            <div @click="gotoMypage(item)">
              <Avatar
                @on-error="
                  (val) =>
                    (val.target.src = require('@/assets/communityimg/avatar.png'))
                "
                shape="circle"
                :src="item.face"
                icon="ios-person"
                size="28"
              />
            </div>
          </div>
          <div class="container-top-center">
            <div class="container-top-true">
              <div class="container-top-title">
                <div class="container-top-one">
                  <span>{{ item.nick_name }}</span>

                  <div class="container-lable-yd">
                    {{ getAuthenticatioStatus(item) }}
                    <!-- <span v-if="item.status == 0">瑜伽</span>
                    <span v-if="item.status == 1">运动员</span>
                    <span v-if="item.status == 2">大师</span> -->
                  </div>
                </div>
                <div class="container-top-two">{{ item.creattime }}</div>
              </div>
              <h3>{{ item.title }}</h3>
              <div class="container-contoin" @click="handleDetail(item)">
                {{ item.content }}
              </div>
              <!-- 图片回复 -->
              <div class="main-container" v-if="item.type == 1">
                <div v-if="(index !== bigIndex &&item.thumbs)" class="img-box">
                    <img
                      class="main-img"
                      @click="lookBig1(v, index)"
                      v-for="(v, i) in item.thumbs.split(',')"
                      :key="i"
                      :src="v"
                      alt=""
                    />
                </div>

                <div class="img-box" v-if="(bigImg && bigIndex == index && item.thumbs)">
                  <img :src="bigimg" class="bigImg" alt="" />
                  <div class="imgList">
                    <img
                      class="imgList-img"
                      @click="lookBig2(a, j)"
                      v-for="(a, j) in item.thumbs.split(',')"
                      :key="j"
                      :src="a"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <!-- 视频回复 -->

              <div
                v-if="item.type == 2 && item.video_url"
                class="container-video"
              >
                <video controls class="video-bb" :src="item.video_url"></video>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-but">
        <div class="ribbon" @click="collect(item.id, 2)">
          <!-- <Icon type="ios-star-outline"  />
          <span>{{ item.is_sc }}</span> -->
          <Icon
            :type="item.havesc === 1 ? 'md-star' : 'ios-star-outline'"
            :color="item.havesc === 1 ? '#FDCD10' : ''"
          />
          <span>{{ item.is_sc }}</span>
        </div>
        <div class="ribbon">
          <Icon type="ios-share-outline" @click="collect(item.id, 3)" /><span>{{
            item.is_zf
          }}</span>
        </div>
        <div class="ribbon" @click="handleDetail(item)">
          <Icon type="ios-text-outline" /> <span>{{ item.is_comits }}</span>
        </div>
        <div class="ribbon npk" @click="collect(item.id, 1)">
          <Icon type="ios-thumbs-up" color="#fdcd10"  v-show="item.havedz"/>
          <Icon type="ios-thumbs-up-outline"  v-show="!item.havedz"/> <span>{{ item.is_like }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  follow,
  setdlc,
  getChosList,
  getChosStatus,
  setChosInfo,
} from "@/api/community";
import { time } from "@/config/time";
import { commonUrl } from "@/plugins/request";
export default {
  data() {
    return {
      subtype: 0,
      show: [],
      select: "公开的",
      value: "",
      formValidate: {},
      list: [
        {
          name: "公开的",
          icon: "md-people",
          color: "yellow",
        },
        {
          name: "同步到圈子",
          icon: "md-sync",
          color: "red",
        },
        {
          name: "仅自己可见",
          icon: "ios-eye-off",
          color: "purple",
        },
      ],
      data: [],
      bigImg: false,
      lookImg: "",
      value1: ["0"],
      defultcircle: "公开的",
      typeList: [
        {
          value: "0",
          label: "公开的",
          children: [],
        },
        {
          value: "1",
          label: "同步圈子",
          children: [],
          loading: false,
        },
        {
          value: "2",
          label: "仅自己可见",
          children: [],
        },
        {
          value: "3",
          label: "草稿",
          children: [],
        },
      ],
      formValidate: {
        titleText: "",
        contText: "",
      },
      ruleValidate: {
        titleText: [
          {
            required: true,
            message: "请填写标题(必填，最多20字)",
            trigger: "blur",
          },
        ],
        contText: [
          { required: true, message: "请填写正文(必填)", trigger: "blur" },
        ],
      },
      action: commonUrl + "/common/common/upload/file", // 上传地址
      accessToken: {}, // 验证token
      uploadList: [],
      uploadListVideo: [],
      mid: JSON.parse(localStorage.userInfo).id,
      bigimg: "",
      bigIndex: -1,
      timer: null,
    };
  },
  props: {
    seachVal: {
      type: String,
      required: "",
    },
  },
  watch: {
    seachVal: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.getlist();
        }, 600);
      },
      deep: true,
    },
  },
  beforeDestroy() {
    if(this.formValidate.titleText && this.formValidate.contText) {
      this.handleSubmit('formValidate',3)
    }
  },
  mounted() {
    this.accessToken.accessToken = localStorage.getItem("accessToken");
    this.getlist();
    // localStorage
    // JSON.parse(localStorage.userInfo)
    // console.log(JSON.parse(localStorage.userInfo).id);
  },
  methods: {
    getAuthenticatioStatus(item) {
      if (item.authenticatio && item.authenticatio.status === 1) {
        return item.authenticatio.title;
      }
      return "";
    },
    casChange(val) {
      if (val[0] == "1") {
        let params = {
          id: val[1],
          mid: JSON.parse(localStorage.userInfo).id,
        };
        getChosStatus(params).then((res) => {
          if (res.code === 1) {
            if (res.type === 2) {
              this.$Modal.info({
                title: "提示",
                content: "该圈子发帖需要审核",
              });
            }
            if (res.type === 1) {
              this.$Modal.info({
                title: "提示",
                content: "该圈子不能发帖",
              });
            }
          }
        });
      }
      if (val[0]) {
        this.defultcircle = this.typeList.filter((a) => {
          return a.value == val[0];
        })[0].label;
      }
      if (val[0] && val[1]) {
        this.defultcircle =
          this.typeList.filter((a) => {
            return a.value == val[0];
          })[0].label +
          "·" +
          this.typeList[1].children.filter((a) => {
            return a.value == val[1];
          })[0].label;
      }
    },
    loadData(item, callback) {
      item.loading = true;
      setTimeout(() => {
        if (item.value == "1") {
          let fow = {
            id: 1,
            mid: JSON.parse(localStorage.userInfo).id,
            pagesize: 1000,
            page: 1,
          };
          getChosList(fow).then((res) => {
            if (res.code == 1) {
              item.children = res.data.map((a) => {
                return {
                  value: a.id,
                  label: a.title,
                };
              });
              item.loading = false;
              callback();
            } else {
              this.$Message.error(res.msg || "获取圈子失败!");
            }
          });
        }
      }, 1000);
    },
    // 上传图片
    handleRemove(index) {
      // 移除图片
      this.uploadList.splice(index, 1);
      this.$forceUpdate();
    },
    //上传失败
    handleSuccessLu(error, file, fileList) {
      this.$Notice.warning({
        title: "请上传正确的图片格式",
      });
    },
    handleSuccess(res, file) {
      // 上传成功回调
      this.uploadList.push(res.result);
      this.$forceUpdate();
    },
    handleBeforeUpload() {
      // 上传之前钩子函数
      const check = this.uploadList.length < 6;
      if (!check) {
        this.$Notice.warning({
          title: "最多可以上传六张图片",
        });
        return check;
      }
    },
    //上传视频
    handleRemoveVideo(index) {
      // 移除图片
      this.uploadListVideo.splice(index, 1);
      this.$forceUpdate();
    },
    //上传失败
    handleSuccessVideoLu(error, file, fileList) {
      this.$Notice.warning({
        title: "请上传正确的MP4视频格式",
      });
    },
    handleSuccessVideo(res, file) {
      // 上传成功回调
      this.uploadListVideo.push(res.result);
      this.$forceUpdate();
    },
    handleBeforeUploadVideo() {
      // 上传之前钩子函数
      const check = this.uploadListVideo.length < 3;
      if (!check) {
        this.$Notice.warning({
          title: "最多可以上传3张图片",
        });
        return check;
      }
    },
    //发布分享
    handleSubmit(name,push_status) {
      let params = {
        mid: JSON.parse(localStorage.userInfo).id,
        title: this.formValidate.titleText,
        content: this.formValidate.contText,
        push_status: push_status|| this.value1[0] || "",
        circlelist_id: this.value1[1] || "",
        act_id: "",
        thumbs: this.uploadList.join(","),
        video_url: this.uploadListVideo.join(","),
        type: this.uploadListVideo.join(",") ? 2 : 1
      };
      this.$refs[name].validate((valid) => {
        if (valid) {
          setChosInfo(params).then((res) => {
            if (res.code == 1) {
              this.$Message.success("发布成功");
              this.uploadList = []
              this.uploadListVideo = []
              this.formValidate = {
                  titleText: "",
                  contText: "",
                }
                this.getlist();
            } else {
              this.$Message.error(res.msg || "发布失败!");
            }
          });
        }
      });
    },
    //获取 平台活动页面数据
    getlist() {
      let fow = {
        mid: JSON.parse(localStorage.userInfo).id,
        page: 1,
        pagesize: 10000,
        keyword: this.seachVal || "",
      };
      this.show = [];
      follow(fow)
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            var timer = time.now();
            const tempList = res.actdata.map((n) => {
              // 活动报名中2
              if (timer > n.ready_stime * 1000 && timer < n.ready_time * 1000) {
                n.status = 2;
              } else if (
                n.act_stime * 1000 < timer &&
                timer < n.act_time * 1000
              ) {
                // 活动进行中1
                n.status = 1;
              } else if (timer < n.act_stime * 1000) {
                // 活动未开始0
                n.status = 0;
              } else if (timer > n.act_time * 1000) {
                // 活动已结束 -1
                n.status = -1;
              }
              n.ready_stime = time.getallTime(n.ready_stime);
              // console.log( n.ready_stime,12312321);
              n.ready_time = time.getallTime(n.ready_time);
              return n;
            });

            // 报名中数据
            const signUping = tempList.filter((it) => {
              const ready_stime = new Date(it.ready_stime).valueOf();
              const ready_time = new Date(it.ready_time).valueOf();
              const current = new Date().valueOf();
              return current > ready_stime && current < ready_time;
            });
            // 活动中数据
            const activing = tempList.filter((it) => {
              const current = new Date().valueOf();
              return (
                current > it.act_stime * 1000 && current < it.act_time * 1000
              );
            });
            // 活动未开始
            const beforeActive = tempList.filter((it) => {
              const current = new Date().valueOf();
              return current < it.ready_stime * 1000;
            });
            // 活动已结束
            const actived = tempList.filter((it) => {
              const current = new Date().valueOf();
              return current > it.act_time * 1000;
            });

            this.show = [
              ...signUping,
              ...activing,
              ...beforeActive,
              ...actived,
            ].slice(0, 3);
            // console.log('🚀🚀',this.show);
            // this.show = [...signUping].slice(0,3)
            this.data = res.topicdata;
            this.data.map((v) => {
              v.creattime = time.getallTime(v.creattime);
            });
          }
        })
        .finally(() => {
          this.timer = null;
        });
    },
    // 一键三连
    collect(id, type) {
      let data = {
        topicid: id,
        type: type,
        // mid: uni.getStorageSync("user_info_obj_dev").id,
        mid: this.mid,
      };
      setdlc(data).then((res) => {
        if (res.code == 1) {
          this.getlist();
        }
      });
    },
    // 选择发帖方式
    format(labels, selectedData) {
      const index = labels.length - 1;
      const data = selectedData[index] || false;
      if (data.value == "more") {
        this.$router.push({
          path: "/circle",
        });
      } else if (data) {
        this.defultcircle = labels[index];
      }
    },
    // 跳转详情
    handleDetail(item) {
      this.$router.push({
        path: "/comment",
        query: {
          id: item.id,
          foucsid: item.aouthid,
          // type: item.type,
        },
      });
    },
    // 活动详情
    toDetail(item) {
      this.$router.push({
        path: `/active-detail?id=${item.id}`,
        // query: {
        //   id:item.id
        // }
      });
    },
    // 跳转至活动列表
    toActivePage() {
      this.$router.push("/active-index");
    },
    // 跳转到主页
    gotoMypage(item) {
      this.$router.push(
        {
          path: "/personalpage",
          query: {
            aouthid: item.aouthid,
          },
        }
        // console.log()
      );
    },
    // 跳转到草稿箱
    gotodraft() {
      this.$router.push({
        path: "/draft",
      });
    },
    checkType(type) {
      this.subtype = type;
    },
    // 放大图片
    lookBig1(img, index) {
      this.bigimg = img;
      this.bigIndex = index;
      this.bigImg = true;
    },
    lookBig2(img, index) {
      this.bigimg = img;
    },
    selectItem(v, i) {
      // console.log(v, i);
      if (i == 1) {
      }
      this.select = v.name;
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  background-color: #fff;
  padding: 10px;

  .top-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .youlive {
      width: 100%;
      // border: 1px solid red;
      display: flex;
      justify-content: space-between;

      span {
        // display: inline-block;
        width: 100%;
      }

      .draft {
        cursor: pointer;
      }
    }

    .top-header-input {
      width: 100%;
      padding: 10px 0;

      ::v-deep.top-input {
        margin: 10px 0;
        width: 100% !important;
      }
    }
  }

  .textarea {
    width: 100%;
    height: 100px;
    // border: 1px solid #f00;
    outline: #f00;
    padding: 10px;
    resize: none;
  }

  .live {
    display: flex;
    justify-content: space-between;

    .live-left,
    .live-right {
      display: flex;
    }

    .live-left {
      .popCla {
        .type-box {
          display: flex;
          align-items: center;
          cursor: pointer;

          .sub-box {
            display: flex;
            align-items: center;

            .demo-upload-list {
              display: inline-block;
              width: 60px;
              height: 60px;
              text-align: center;
              line-height: 60px;
              border: 1px solid transparent;
              border-radius: 4px;
              overflow: hidden;
              background: #fff;
              position: relative;
              box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
              margin-right: 4px;
            }

            .demo-upload-list img {
              width: 100%;
              height: 100%;
            }

            .demo-upload-list-cover {
              display: none;
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background: rgba(0, 0, 0, 0.6);
            }

            .demo-upload-list:hover .demo-upload-list-cover {
              display: block;
            }

            .demo-upload-list-cover i {
              color: #fff;
              font-size: 20px;
              cursor: pointer;
              margin: 0 2px;
              z-index: 9999;
            }
          }
        }
      }

      .video {
        /*margin-left: 20px;*/
      }
    }

    .live-right {
      // .drop {
      cursor: pointer;

      .defult {
        display: flex;
        align-items: center;
      }

      .dropMenu {
        .dropItem {
          display: flex;
          align-items: center;

          .icon {
            width: 20px;
          }

          .title {
            flex: 1;
            text-align: center;
          }
        }
      }

      // }
      .sub {
        cursor: pointer;
        color: #fff;
        background-color: #f00;
        border: none;
        width: 80px;
        height: 20px;
        margin-left: 30px;
      }
    }
  }
}

.platform-activities {
  width: 100%;
  height: 231px;
  // border: 1px solid red;
  margin-bottom: 32px;

  .platform-activities-tit {
    width: 100%;
    height: 41px;
    // border: 1px solid red;
    padding: 0 14px;
    background-color: #e4e3f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;

    .platform-activities-tit-span {
      cursor: pointer;
      width: 62px;
      height: 20px;
      border-radius: 20px;
      background-color: #fff;
      color: #333333;
      font-size: 9px;
      text-align: center;
      line-height: 20px;
    }
  }

  .platform-activities-contain {
    width: 100%;
    height: 62px;
    padding: 0 14px;
    // border: 1px solid red;
    border-bottom: 1px solid #ececec;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .platform-activities-left {
      color: #333333;
      font-size: 9px;
      font-weight: 500;
      color: #333333;

      .platform-activities-left-span {
        cursor: pointer;
      }

      .platform-activities-left-time {
        font-size: 8px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #878583;
      }
    }

    .platform-activities-left-img {
      width: 10px;
      height: 10px;
    }

    .coming {
      width: auto;
      height: 18px;
      border-radius: 3px 0px 0px 3px;
      color: #35b572;
      font-size: 8px;
      text-align: center;
      line-height: 18px;
      padding: 0 10px;

      .active {
        background-color: #dcf8ee;
        background-color: #dcf8ee;
        color: #35b572;
      }

      .inActive {

        color: #fff;
      }
    }
  }
}

.center {
  width: 100%;
  // height: 500px;
  // border: 1px solid red;
  // background-color: #FD5151;
  margin-bottom: 9px;

  .container {
    width: 100%;
    min-height: 0px;
    // border: 1px solid rgb(27, 98, 213);
    border-radius: 6px;
    background-color: #fff;

    .container-top {
      width: 100%;
      // height: calc(350px - 36px);
      // border: 1px solid red;
      padding-top: 12px;
      display: flex;
      justify-content: flex-start;

      .container-top-img {
        cursor: pointer;
        width: 28px;
        height: 100%;
        margin-left: 12px;

        > img {
          width: 28px;
          height: 28px;
          border-radius: 50%;
        }
      }

      .container-top-center {
        width: 100%;
        height: 100%;
        // background-color: rgb(43, 12, 12);
        padding-right: 45px;

        .container-top-true {
          width: 100%;
          height: 100%;

          // background-color: rgb(26, 44, 162);
          .container-top-title {
            width: 100%;
            height: 38px;
            // border: 1px solid red;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 9px;

            .container-top-one {
              width: 100%;
              height: 14px;
              font-size: 8px;
              font-weight: 500;
              color: #333333;
              display: flex;
              align-items: center;
              justify-content: flex-start;

              .container-lable-yd {
                width: auto !important;
                padding: 0 6px;
                height: 11px;
                // background: #fcf0f0;
                border-radius: 2px;
                width: 20px;
                font-size: 7px;
                font-weight: 400;
                color: #fd5151;
                line-height: 11px;
                margin-left: 10px;
              }
            }

            .container-top-two {
              width: 100%;
              height: 14px;
              font-size: 7px;

              font-weight: 400;
              color: #acacac;
            }
          }

          .container-contoin {
            cursor: pointer;
            margin-bottom: 12px;
            font-size: 8px;
            font-weight: 400;
            color: #333333;
            line-height: 14px;
            // border: 1px solid red;
          }

          .main-container {
            width: 100%;
            min-height: 0px;
            // background-color: #FD5151;
            display: flex;
            flex-wrap: wrap;

            .img-box {
              width: 100%;

              .main-img {
                cursor: pointer;
                width: 32%;
                display: inline-block;
                height: 86px;
                border-radius: 3px;
                margin-bottom: 7px;
                background-color: #dedede;
                object-fit: scale-down;
              }

              .bigImg {
                // width: 80%;
                max-height: 400px;
              }

              .imgList {
                width: 100%;
                .imgList-img {
                  width: 50px;
                  height: 50px;
                  margin: 10px;
                  object-fit: scale-down;
                }
              }
            }
          }

          .container-video {
            width: 100%;
            // height: 313px;

            .video-bb {
              width: 100%;
              max-height: 200px;
              // height: 178px;
            }
          }
        }
      }
    }
  }

  .container-but {
    width: 100%;
    height: 36px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #ececec;

    .ribbon {
      width: 25%;
      height: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #ececec;
    }

    .npk {
      border-right: none;
    }
  }
}
</style>
